<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>【抖音短视频】记录美好生活-Douyin.com</title>
    <style type="text/css">
        .header-left {
            margin-left: 80px;
            margin-top: 10px;
            float: left;
            height: 55px;


        }
        .video-tvc {
            height: 100%;
            width: 100%;
            object-fit: cover;
            z-index: -9999;
            margin-left: -200px;
            position: absolute;


        }
        video {
            margin: 0;
            padding: 0;
            border: 0;


        }
        a{
            text-decoration: none;
            color: white;

        }


.right{
    float: left;
    margin: 28px  0px 0px 400px;

}
        .create-platform {
            position: absolute;
            background-image: url(create-bubble_c2cd9db.png);
            background-position: 0 0;
            background-size: cover;
            top: 45px;
            left: 50%;
            margin-left: -200px;
            height: 42px;
            width: 198px;
            font-size: 14px;
            color: rgba(255,255,255,.9);
            text-align: center;
            line-height: 20px;
            padding-top: 14px;
            box-sizing: border-box;

        }
        .f{
            font-size: 15px; color: white;
            font-weight: bold;


        }
        .menu {
            display: none;
            width: 96px;
            padding: 8px 0;
            box-sizing: border-box;
            box-shadow: 0 0 8px rgba( 0,0,0,.16), 0 0 2px rgba(0,0,0,.12);
            border-radius: 4px;

        }
        .unmute {
              background-image: url(unmute_1bbc0c3.png);



          }
        .mute {
            background-image: url(mute.png);


        }
       .pic{

           background-position: center;
           background-repeat: no-repeat;
           background-size: cover;
           width: 22px;
           height: 22px;
           cursor: pointer;
           margin: 0px 20px 0px 50px;

        }
        .slogan {
            float: right;
            width: 450px;
          margin: 100px 150px 0px  0px;

        }
        .btn-list {
          float: left;
            background-image: url("appstore_548e83a.png");
            background-repeat: no-repeat;
            background-size: cover;
            width: 144px;
            height: 53px;
            transition-delay: .15s;
            border: 1px solid #000;
            display: inline-block;
            box-shadow: 1px 1px 7px 2px rgba(0,0,0,.54);
            border-radius: 8px;

        }
        .icon-andorid {
            float: left;
            width: 142px;
            height: 53px;
            display: block;
            border-radius: 8px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-image: url(android_d461475.png);
            border: 1px solid #000;
            margin-left: 10px;

        }
        .erweim{
            float: left;
            width: 52px;
            height: 52px;
            display: block;
            border-radius: 8px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-image: url(download_6c60bcd.png);
            border: 1px solid #000;
            margin-left: 10px;

        }
        .erweim:hover{
            width: 240px;
            height: 240px;
            background-image: url("QRcode_c129445.png");


        }
        .nav-warpper {
         color:white;


            text-shadow: 0 1px 2px rgba(0,0,0,.4);
            margin-bottom: 16px;
        }
        .footer {
            font-size: 14px;
            width: 100%;
            background: transparent;
            text-align: center;

            bottom: 100px;
            position: fixed;
        }
        .number{
            font-size: 14px;
       color: white;
            width: 100%;
            background: transparent;
            text-align: center;

            bottom: 75px;
            position: fixed;
        }
        .number2{
            font-size: 14px;
            color: white;
            width: 100%;
            background: transparent;
            text-align: center;

            bottom: 30px;
            position: fixed;
        }
.gongan-box{
    font-size: 14px;
    color: white;
    width: 100%;
    background: transparent;
    text-align: center;

    bottom: 10px;
    position: absolute;
}

    </style>
</head>
            <body style="margin: 0">

            <div class="header-left">
                <a href="https://www.douyin.com/" ><img src=" douyin.png" alt="logo" style="height: 45px; "></a>
            </div>

                <video muted="muted"  loop="loop" autoplay="autoplay" src="douyingvidio.mp4" class="video-tvc"  daject-fit>抱歉，您的浏览器不支持内嵌视频</video>

               <div class="right">
                   <i><a href="https://creator.douyin.com"><i class="f">创作服务平台</i></a>
                       <div class="create-platform">原【视频上传】已并入此功能</div>
                   </i>
                   <i style="margin: 0px 0px 0px  20px"> <a href="https://open.douyin.com" ><i class="f">开放平台</i>  </a></i>
                   <i style="margin: 0px 0px 0px  20px"> <a  ><i class="f">系列产品</i>  </a>
                       <div class="menu"><a href="https://www.huoshanzhibo.com/">抖音火山版</a> <a href="https://lv.ulikecam.com/">剪映</a> <a href="https://www.duoshanapp.com/">多闪</a></div>
                   </i>
                   <i style="margin: 0px 0px 0px  20px"> <a href="https://union.bytedance.com/open/" ><i class="f">抖音直播</i>  </a></i>
                   <i style="margin: 0px 0px 0px  20px"> <a href="" ><i class="f">合作入驻</i></a></i>
                   <i style="margin: 0px 0px 0px  20px"> <a href="" ><i class="f">企业合作</i></a></i>
                   <i style="margin: 0px 0px 0px  20px"> <a href="https://www.douyin.com/aboutus/" ><i class="f">联系我们</i></a></i>
                   <div class="pic unmute"style="float: right">
                   </div>
               </div>
            <div ><img src="slogan_2_8d59f13.png" alt="slogan" class="slogan"></div>
            <div style="  float: right;
            margin: 250px -380px 0px  0px;">
                <a href="https://apps.apple.com/cn/app/%E6%8A%96%E9%9F%B3%E7%9F%AD%E8%A7%86%E9%A2%91/id1142110895?l=zh&ls=1"><div class="btn-list"></div></a>
                <a  href="http://s.toutiao.com/UsMYE/"> <div class="icon-andorid"></div></a>
                <div class="erweim ">

                </div>
            </div>
            <div class="footer">
                <nav class="nav-warpper"><span>|</span> <a href="https://www.douyin.com/cnl_music/music_tab/">音乐</a> <span>|</span><a href="https://www.douyin.com/agreement/">用户服务协议</a> <span>|</span> <a href="https://www.douyin.com/privacy/">隐私政策</a> <span>|</span> <a href="https://www.douyin.com/recovery_account/">账号找回</a> <span>|</span><a href="https://www.douyin.com/resource/douyin?source=dou">广告投放</a> <span>|</span> <a href="https://www.douyin.com/business_license/">营业执照</a> <span>|</span></nav>
            </div>
            <div  class="number">
                <i><span >2020</span>&nbsp;©&nbsp;抖音&nbsp;&nbsp;|&nbsp;京ICP备16016397号-3&nbsp;|&nbsp;北京微播视界科技有限公司 |&nbsp; 京B2-20170846</i>
            </div>
            <div class="number2">
                <p><a target="_blank" href="http://www.12377.cn/">中国互联网举报中心</a>&nbsp;|&nbsp;网络文化许可证-京网文-（2016）2282-264号&nbsp;|&nbsp;客户服务热线：400-992-2556&nbsp;|&nbsp;违法和不良信息举报：400-140-2108&nbsp;|&nbsp;举报邮箱：jubao@douyin.com</p>
            </div>
            <div class="gongan-box"><img src="gongan_d0289dc.png"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023605">京公网安备 11010802023605号</a> <span>&nbsp; | &nbsp;地址&nbsp;:&nbsp;北京市海淀区知春路51号4层408&nbsp;</span></div>
            <script type="text/javascript" >
                ( function(){
                    let video = document.querySelector( ".video-tvc" );
                    let btn = document.querySelector( ".pic" );

                    let action = function(){
                        // 如果时静音状态
                        if( video.muted ) {
                            video.muted = false ; // 让它不再沉默
                            btn.classList.remove( "unmute" ); // 为 btn 元素移除 unmute 这个 class name
                            btn.classList.add( "mute" ); // 为 btn 元素添加 mute 这个 class name
                        } else {
                            video.muted = true ; // 让它沉默
                            btn.classList.remove( "mute" ); // 为 btn 元素移除 mute 这个 class name
                            btn.classList.add( "unmute" ); // 为 btn 元素添加 unmute 这个 class name
                        }
                    }

                    btn.addEventListener( "click" , action , false );
                })();
            </script>
            </body>
</html>